<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/heyui"></script>
    <script type="text/javascript" rel="script" src="../axios/axios.min.js"></script>
    <script type="text/javascript" rel="script" src="../axios/qs.js"></script>
    <link rel="stylesheet" type="text/css" href="../heyui/index.css"></link>
    <script type="text/javascript" rel="script" src="../axios/ajax.js"></script>
</head>
<body>

<div id="app" v-padding="10">
    <div class="h-panel">
        <div class="h-panel-bar">
            <span class="h-panel-title">角色管理</span>
            <span v-color:gray v-font="13"></span>
            <div class="h-panel-right">
                <h-search placeholder="请输入角色名称" v-width="200"></h-search><i class="h-split"></i>
                <button class="h-btn h-btn-green h-btn-m">查询</button>
            </div>
        </div>
        <div class="h-panel-bar">
            <div class="h-btn-group">
                <button class="h-btn" @click="addRole"><i class="h-icon-inbox"></i><span>新建</span></button>
                <button class="h-btn"><i class="h-icon-trash"></i><span>删除</span></button>
                <button class="h-btn"><i class="h-icon-edit"></i><span>编辑</span></button>
                <button class="h-btn"><i class="h-icon-users"></i><span>成员</span></button>
                <button class="h-btn"><i class="h-icon-menu"></i><span>功能</span></button>
                <button class="h-btn"><i class="h-icon-menu"></i><span>数据权限</span></button>
                <button class="h-btn"><i class="h-icon-search"></i><span>查询</span></button>
                <button class="h-btn" @click="refresh"><i class="h-icon-refresh"></i><span>刷新</span></button>
            </div>
        </div>
        <div class="h-panel-body bottom-line">
            <h-table :border="true" :datas="datas" checkbox >
                <h-table-item title="角色名称" prop="roleName" :width="300"></h-table-item>
                <h-table-item title="数据对象" prop="dataObject" :width="150"></h-table-item>
                <h-table-item title="角色类型" :width="150">
                    <template slot-scope="row">{{roleTypes[row.data.roleType]}}</template>
                </h-table-item>
                <h-table-item title="描述" prop="description" ></h-table-item>
            </h-table>
        </div>
        <div class="h-panel-bar">
            <h-pagination :cur="page.currentPage"
                          :total="page.total"
                          :small="true"
                          :sizes="page.pageSizes"
                          :size="page.pageSize"
                          align="right" @change="currentChange"></h-pagination>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                roleTypes: {},
                page: {
                    cur: 3,
                    total: 58
                },
                page: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    totalCount: 0,
                    pageSizes: [15, 30, 45, 60],
                    pageSize: 15 //每页显示多少条
                },
                datas: []
            }
        },
        methods: {
            refresh(){
                this.fetchList();
            },
            addRole(){
                window.location.href = "roles-add";
            },
            currentChange(page) {
                this.fetchList({'start': (page.cur-1)* this.page.pageSize, 'limit': page.size})
            },
            fetchList(params){
                axios(
                    {
                        url:'roles-query',
                        method:'post',
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        data: Qs.stringify(Object.assign({},{'start': (this.page.currentPage-1)* this.page.pageSize, 'limit': this.page.pageSize},params))
                    }
                ).then(response => {
                    if (response.status == 200) {
                        this.datas=response.data.data.result;
                        this.page = Object.assign({},this.page,{
                            total: Number.parseInt(response.data.data.totalCount), //总页数
                            currentPage: Number.parseInt(response.data.data.currentPageNo), //当前页数
                            totalCount: Number.parseInt(response.data.data.totalPageCount),
                            pageSize: Number.parseInt(response.data.data.pageSize) //每页显示多少条
                        })
                    }
                });
            },
        },
        components: {
        },
        mounted(){
            this.fetchList();
            axios.get('../dict/getdatabytype/roleType').then(response => {
                if (response.status == 200) {
                    const data = response.data.data;
                    for (let d of data) {
                        this.roleTypes[d.value] = d.label;
                    }
                }
            });
        },
    })
</script>
</body>
</html>